<template>
  <view id="app">
    <view class="centered">
      <!-- <image src="../../../../../static/logo.png" mode=""></image> -->
    </view>
    <view class="userinfo">
      <u-row gutter="16">
        <u-col span="2">
          <iframe :src="vodies || 'https://player.bilibili.com/player.html?aid=626054090&bvid=BV1Xt4y1X7h7&cid=203625805&page=2'" class="player-wrapper"></iframe>
        </u-col>
        <u-col span="6">
          <text>{{ voidinfo.owner && voidinfo.owner.name }}</text>
          <view>
            <text>700粉</text>
            <text>123</text>
          </view>
        </u-col>
        <u-col span="4">
          <u-button size="mini">关注</u-button>
        </u-col>
      </u-row>
      <u-row gutter="16">
        <u-col span="3"> <u-icon name="rewind-right-fill"></u-icon>{{ voidinfo.stat && voidinfo.stat.view | unitConverter }} </u-col>
        <u-col span="3"> <u-icon name="more-circle"></u-icon>{{ voidinfo.stat && voidinfo.stat.danmaku | unitConverter }} </u-col>
        <u-col span="3"> 18.6万弹幕 </u-col>
        <u-col span="3">
          {{ formatDate(voidinfo.ctime) }}
        </u-col>
      </u-row>
      <u-read-more :shadow-style="shadowStyle" :toggle="true" show-height="80" close-text="查看更多" color="#ccc">
        <rich-text :nodes="voidinfo.title"></rich-text>
      </u-read-more>
      <view style="display: flex" v-if="voidinfo.pages && voidinfo.pages.length > 1">
        <view class="lass">
          <text class="index" v-for="(it, index) in voidinfo.pages" :key="index" :class="{ accrevt: index === accterindex ? true : false }" @click="accterpage(index, it)"> {{ it.part }}</text>
        </view>
        <view class="bent">
          <u-icon name="arrow-down" @click="shouban"></u-icon>
        </view>
      </view>

      <u-row gutter="16">
        <u-col span="3"> <u-icon name="thumb-up-fill" size="50"></u-icon>{{ voidinfo.stat && voidinfo.stat.like | unitConverter }} </u-col>
        <u-col span="3"> <u-icon name="rmb-circle-fill" size="50"></u-icon>{{ voidinfo.stat && voidinfo.stat.coin | unitConverter }} </u-col>
        <u-col span="3"> <u-icon name="heart" size="50"></u-icon>{{ voidinfo.stat && voidinfo.stat.favorite | unitConverter }} </u-col>
        <u-col span="3"> <u-icon name="zhuanfa" size="50"></u-icon>{{ voidinfo.stat && voidinfo.stat.share | unitConverter }} </u-col>
      </u-row>
    </view>
    <u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
    <view class="contentBox">
      <bililistLine v-if="current === 0" :listData="listData" @theCurrent="theCurrent"></bililistLine>
      <view v-show="current === 1" class="comment" v-for="(itme, index) in comments.replies" :key="index">
        <u-row class="userinfo" gutter="16">
          <u-col span="2">
            <!-- #ifdef H5 -->
            <image :src="getimg(itme.member.avatar)"></image>
            <!-- #endif -->
            <image :src="itme.member.avatar"></image>
          </u-col>
          <u-col span="8">
            {{ itme.member.uname }}
            <view>
              {{ formatDate(itme.ctime) }}
            </view>
          </u-col>
          <u-col span="2"> <u-icon name="thumb-up" size="28"></u-icon> {{ itme.like }} </u-col>
        </u-row>
        <view class="myIComments">{{ itme.content.message }}</view>
        <view class="comments" v-if="itme.replies">
          <view class="reply" v-for="(more, index) in itme.replies" :key="index">
            <text
              ><text class="name">{{ more.member.uname }}：</text>{{ more.content.message }}</text
            >
          </view>
          <view class="reply" v-if="itme.count > 0">
            <text
              ><text class="name">共回复{{ itme.count }}条></text></text
            >
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="show" mode="bottom">
      <view class="bottomBox">
        <view v-for="(it, index) in voidinfo.pages" :key="index" @click="accterpage(index, it)" :class="{ accrevt: index === accterindex ? true : false }">
          <text> {{ it.part }}</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '相关推荐',
        },
        {
          name: '评论',
        },
      ],
      current: 1,
      shadowStyle: {
        backgroundImage: 'none',
        paddingTop: '0',
        marginTop: '10rpx',
      },
      theCurrentData: {},
      voidinfo: {},
      listData: [],
      comments: [],
      vodies: 'https://player.bilibili.com/player.html?',
      accterindex: 0,
      show: false,
    };
  },
  onLoad({ data }) {
    try {
      this.theCurrentData = JSON.parse(data);
    } catch (e) {
      //TODO handle the exception
    }
    this.videoinfo();
    this.videoInfoRecommendList();
    this.videoinfocomment();
    this.vodies += `aid=${this.theCurrentData.aid}&bvid=${this.theCurrentData.bvid}&cid=${this.theCurrentData.cid}`;
  },
  methods: {
    async videoinfo() {
      this.voidinfo = await this.http(
        this.api.videoinfo,
        {
          bvid: this.theCurrentData.bvid,
        },
        'GET'
      );
      console.log(this.voidinfo);
    },
    async videoInfoRecommendList() {
      let data = await this.http(this.api.videoInfoRecommendList, {
        bvid: this.theCurrentData.bvid,
      });
      //#ifdef H5
      data.forEach(async (item) => {
        item.pic =
          this.baseHttpUrl +
          (await this.http(
            this.api.bilibili_get_img,
            {
              url: item.pic,
            },
            'GET'
          ));
      });
      //#endif
      this.listData = [...this.listData, ...data];
    },
    async videoinfocomment() {
      this.comments = await this.http(this.api.videoinfocomment, {
        bvid: this.theCurrentData.bvid,
      });
      this.list[1].name = '评论' + this.comments.cursor.all_count;
    },
    getimg(url) {
      this.http(this.api.bilibili_get_img, {
        url,
      }).then((res) => {
        return this.baseHttpUrl + res;
      });
    },
    theCurrent(data) {
      uni.navigateTo({
        url: `./info?data=${JSON.stringify(data)}`,
      });
    },
    formatDate(time) {
      return this.Public.formatDate(time, 'MM-dd');
    },
    sectionChange(index) {
      this.current = index;
    },
    shouban() {
      this.show = true;
    },
    accterpage(index, item) {
      this.accterindex = index;
      this.vodies += `aid=${this.theCurrentData.aid}&bvid=${this.theCurrentData.bvid}&cid=${item.cid}&page=${item.page}`;
    },
  },
};
</script>

<style scoped lang="less">
.bottomBox {
  width: 100vw;
  height: 50vh;
  display: inline-block;
  overflow: hidden;
  overflow-y: auto;
  margin: 10rpx;
  view {
    height: auto;
    padding: 10rpx;
    float: left;
    width: 48vw;
    text {
      width: 90vw;
      // border: 2rpx solid red;
    }
  }
}
.lass {
  width: 90vw;
  height: 7vh;
  overflow: hidden;
  overflow-x: auto;
  display: inline-block;
  display: flex;
  align-items: center;
  .index {
    white-space: nowrap;
    height: auto;
    width: auto;
    padding: 10rpx;
    margin: 10rpx;
    border-radius: 14px;
    background: #f5f5f5;
    border: 2rpx solid #ccc;
  }
}
.accrevt {
  color: red;
  border: 2px solid;
}
.bent {
  width: 10%;
  display: flex;
  align-items: center;
}

.windowing() {
  width: 100vw;
  height: 30vh;
}

.comment {
  .windowing();
  height: auto;

  .comments {
    width: 100vw;
    height: auto;
    background: #f4f4f4;
    border-radius: 10rpx;

    .name {
      vertical-aling: middle;
      color: #5090cc;
    }
  }
}

.player-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  .windowing();
}

.userinfo {
  image {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }
}

.centered {
  .windowing();

  image {
    .windowing();
  }
}

.contentBox {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;

  .myIComments {
    width: 80vw;
    margin-left: 15vw;
    padding: 2%;
  }

  .comments {
    width: 80vw;
    margin-left: 15vw;
    padding: 2%;
  }

  .reply {
    padding: 2%;
  }
}

.u-row {
  padding: 14rpx;
}
</style>
